Form Builder
Fields
Getting started
Field classes can be found in the Filament\Form\Components namespace.
Fields reside within the schema of your form, alongside any layout components.
If you're using the fields in a Livewire component, you can put them in the getFormSchema() method:
protected function getFormSchema(): array{ return [ // ... ];}
If you're using them in admin panel resources or relation managers, you must put them in the $form->schema() method:
public static function form(Form $form): Form{ return $form ->schema([ // ... ]);}
Fields may be created using the static make() method, passing its name. The name of the field should correspond to a property on your Livewire component. You may use Livewire's "dot syntax" to bind fields to nested properties such as arrays and Eloquent models.
use Filament\Forms\Components\TextInput; TextInput::make('name')
Setting a label
By default, the label of the field will be automatically determined based on its name. To override the field's label, you may use the label() method. Customizing the label in this way is useful if you wish to use a translation string for localization:
use Filament\Forms\Components\TextInput; TextInput::make('name')->label(__('fields.name'))
Optionally, you can have the label automatically translated by using the translateLabel() method:
use Filament\Forms\Components\TextInput; TextInput::make('name')->translateLabel() // Equivalent to `label(__('Name'))`
Setting an ID
In the same way as labels, field IDs are also automatically determined based on their names. To override a field ID, use the id() method:
use Filament\Forms\Components\TextInput; TextInput::make('name')->id('name-field')
Setting a default value
Fields may have a default value. This will be filled if the form's fill() method is called without any arguments. To define a default value, use the default() method:
use Filament\Forms\Components\TextInput; TextInput::make('name')->default('John')
Note that inside the admin panel this only works on Create Pages, as Edit Pages will always fill the data from the model.
Helper messages and hints
Sometimes, you may wish to provide extra information for the user of the form. For this purpose, you may use helper messages and hints.
Help messages are displayed below the field. The helperText() method supports Markdown formatting:
use Filament\Forms\Components\TextInput; TextInput::make('name')->helperText('Your full name here, including any middle names.')
Hints can be used to display text adjacent to its label:
use Filament\Forms\Components\TextInput; TextInput::make('password')->hint('[Forgotten your password?](forgotten-password)')
Hints may also have an icon rendered next to them:
use Filament\Forms\Components\RichEditor; RichEditor::make('content') ->hint('Translatable') ->hintIcon('heroicon-s-translate')
Hints may have a color(). By default it's gray, but you may use primary, success, warning, or danger:
use Filament\Forms\Components\RichEditor; RichEditor::make('content') ->hint('Translatable') ->hintColor('primary')
Custom attributes
The HTML attributes of the field's wrapper can be customized by passing an array of extraAttributes():
use Filament\Forms\Components\TextInput; TextInput::make('name')->extraAttributes(['title' => 'Text input'])
To add additional HTML attributes to the input itself, use extraInputAttributes():
use Filament\Forms\Components\Select; Select::make('categories') ->extraInputAttributes(['multiple' => true])
Disabling
You may disable a field to prevent it from being edited:
use Filament\Forms\Components\TextInput; TextInput::make('name')->disabled()
Optionally, you may pass a boolean value to control if the field should be disabled or not:
use Filament\Forms\Components\Toggle; Toggle::make('is_admin')->disabled(! auth()->user()->isAdmin())
Please note that disabling a field does not prevent it from being saved, and a skillful user could manipulate the HTML of the page and alter its value.
To prevent a field from being saved, use the dehydrated(false) method:
Toggle::make('is_admin')->dehydrated(false)
Alternatively, you may only want to save a field conditionally, maybe if the user is an admin:
Toggle::make('is_admin') ->disabled(! auth()->user()->isAdmin()) ->dehydrated(auth()->user()->isAdmin())
If you're using the admin panel and only want to save disabled fields on the Create page of a resource:
use Filament\Resources\Pages\CreateRecord;use Filament\Resources\Pages\Page; TextInput::make('slug') ->disabled() ->dehydrated(fn (Page $livewire) => $livewire instanceof CreateRecord)
Hiding
You may hide a field:
use Filament\Forms\Components\TextInput; TextInput::make('name')->hidden()
Optionally, you may pass a boolean value to control if the field should be hidden or not:
use Filament\Forms\Components\TextInput; TextInput::make('name')->hidden(! auth()->user()->isAdmin())
Autofocusing
Most fields will be autofocusable. Typically, you should aim for the first significant field in your form to be autofocused for the best user experience.
use Filament\Forms\Components\TextInput; TextInput::make('name')->autofocus()
Setting a placeholder
Many fields will also include a placeholder value for when it has no value. You may customize this using the placeholder() method:
use Filament\Forms\Components\TextInput; TextInput::make('name')->placeholder('John Doe')
Global settings
If you wish to change the default behaviour of a field globally, then you can call the static configureUsing() method inside a service provider's boot() method, to which you pass a Closure to modify the component using. For example, if you wish to make all checkboxes inline(false), you can do it like so:
use Filament\Forms\Components\Checkbox; Checkbox::configureUsing(function (Checkbox $checkbox): void { $checkbox->inline(false);});
Of course, you are still able to overwrite this on each field individually:
use Filament\Forms\Components\Checkbox; Checkbox::make('is_admin')->inline()
Text input
The text input allows you to interact with a string:
use Filament\Forms\Components\TextInput; TextInput::make('name')

You may set the type of string using a set of methods. Some, such as email(), also provide validation:
use Filament\Forms\Components\TextInput; TextInput::make('text') ->email() ->numeric() ->password() ->tel() ->url()
You may instead use the type() method to pass another HTML input type:
use Filament\Forms\Components\TextInput; TextInput::make('backgroundColor')->type('color')
You may limit the length of the input by setting the minLength() and maxLength() methods. These methods add both frontend and backend validation:
use Filament\Forms\Components\TextInput; TextInput::make('name') ->minLength(2) ->maxLength(255)
You may also specify the exact length of the input by setting the length(). This method adds both frontend and backend validation:
use Filament\Forms\Components\TextInput; TextInput::make('code')->length(8)
In addition, you may validate the minimum and maximum value of the input by setting the minValue() and maxValue() methods:
use Filament\Forms\Components\TextInput; TextInput::make('number') ->numeric() ->minValue(1) ->maxValue(100)
You may set the autocomplete configuration for the text field using the autocomplete() method:
use Filament\Forms\Components\TextInput; TextInput::make('password') ->password() ->autocomplete('new-password')
As a shortcut for autocomplete="off", you may disableAutocomplete():
use Filament\Forms\Components\TextInput; TextInput::make('password') ->password() ->disableAutocomplete()
For more complex autocomplete options, text inputs also support datalists.
Phone number validation
When using a tel() field, the value will be validated using: /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\.\/0-9]*$/.
If you wish to change that, then you can use the telRegex() method:
use Filament\Forms\Components\TextInput; TextInput::make('phone') ->tel() ->telRegex('/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\.\/0-9]*$/')
Alternatively, to customize the telRegex() across all fields, use a service provider:
use Filament\Forms\Components\TextInput; TextInput::configureUsing(function (TextInput $component): void { $component->telRegex('/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\.\/0-9]*$/');});
Affixes
You may place text before and after the input using the prefix() and suffix() methods:
use Filament\Forms\Components\TextInput; TextInput::make('domain') ->url() ->prefix('https://') ->suffix('.com')

You may place a icon before and after the input using the prefixIcon() and suffixIcon() methods:
use Filament\Forms\Components\TextInput; TextInput::make('domain') ->url() ->prefixIcon('heroicon-s-external-link') ->suffixIcon('heroicon-s-external-link')
You may render an action before and after the input using the prefixAction() and suffixAction() methods:
use Filament\Forms\Components\Actions\Action;use Filament\Forms\Components\TextInput; TextInput::make('domain') ->suffixAction(fn (?string $state): Action => Action::make('visit') ->icon('heroicon-s-external-link') ->url( filled($state) ? "https://{$state}" : null, shouldOpenInNewTab: true, ), )
Input masking
Input masking is the practice of defining a format that the input value must conform to.
In Filament, you may interact with the Mask object in the mask() method to configure your mask:
use Filament\Forms\Components\TextInput; TextInput::make('name') ->mask(fn (TextInput\Mask $mask) => $mask->pattern('+{7}(000)000-00-00'))
Under the hood, masking is powered by imaskjs. The vast majority of its masking features are also available in Filament. Reading their guide first, and then approaching the same task using Filament is probably the easiest option.
You may define and configure a numeric mask to deal with numbers:
use Filament\Forms\Components\TextInput; TextInput::make('number') ->numeric() ->mask(fn (TextInput\Mask $mask) => $mask ->numeric() ->decimalPlaces(2) // Set the number of digits after the decimal point. ->decimalSeparator(',') // Add a separator for decimal numbers. ->integer() // Disallow decimal numbers. ->mapToDecimalSeparator([',']) // Map additional characters to the decimal separator. ->minValue(1) // Set the minimum value that the number can be. ->maxValue(100) // Set the maximum value that the number can be. ->normalizeZeros() // Append or remove zeros at the end of the number. ->padFractionalZeros() // Pad zeros at the end of the number to always maintain the maximum number of decimal places. ->thousandsSeparator(','), // Add a separator for thousands. )
Enum masks limit the options that the user can input:
use Filament\Forms\Components\TextInput; TextInput::make('code')->mask(fn (TextInput\Mask $mask) => $mask->enum(['F1', 'G2', 'H3']))
Range masks can be used to restrict input to a number range:
use Filament\Forms\Components\TextInput; TextInput::make('code')->mask(fn (TextInput\Mask $mask) => $mask ->range() ->from(1) // Set the lower limit. ->to(100) // Set the upper limit. ->maxValue(100), // Pad zeros at the start of smaller numbers.)
In addition to simple pattens, you may also define multiple pattern blocks:
use Filament\Forms\Components\TextInput; TextInput::make('cost')->mask(fn (TextInput\Mask $mask) => $mask ->patternBlocks([ 'money' => fn (Mask $mask) => $mask ->numeric() ->thousandsSeparator(',') ->decimalSeparator('.'), ]) ->pattern('$money'),)
There is also a money() method that is able to define easier formatting for currency inputs. This example, the symbol prefix is $, there is a , thousands separator, and two decimal places:
use Filament\Forms\Components\TextInput; TextInput::make('cost')->mask(fn (TextInput\Mask $mask) => $mask->money(prefix: '$', thousandsSeparator: ',', decimalPlaces: 2))